<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://jsptags.com/tags/navigation/pager" prefix="pg"%>
<%
	String path=request.getContextPath();
	String basePath=request.getScheme()+"://"
			+request.getServerName()+":"+request.getServerPort()
			+path+"/";
%>
<!DOCTYPE html>
<html>
<base href="<%=basePath%>">
<head>
	<title>用户列表</title>
	<meta charset="utf-8">
	<link rel="icon" href="img/logo.png" sizes="32x32">
	<link rel="stylesheet" type="text/css" href="layui/css/layui.css">
	<script type="text/javascript" src="layui/layui.js"></script>
</head>
<body>
	<div class="layui-anim layui-anim-up">
		<table class="layui-hide" id="test" lay-filter="demo"></table>
		<script type="text/html" id="barDemo">
	  		<a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
	  		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
		</script>
	</div>
	<script>
		layui.use('table', function(){
		  var table = layui.table;
		  var $=layui.$;
		  table.render({
		    elem: '#test'
		    ,url:'user/list'
		    ,cols: [[
		      {field:'userId', width:'10%', title: 'ID', sort: true}
		      ,{field:'userName', width:'20%', title: '用户名', edit: 'text'}
		      ,{field:'passWord', width:'20%', title: '密码', edit: 'text'}
		      ,{field:'email', width:'20%', title: '邮箱', edit: 'text'}
		      ,{field:'userImg', width:'10%', title: '头像路径', edit: 'text'}
		      ,{fixed:'right', title:'操作', toolbar: '#barDemo', width:'20%'}
		    ]]
		    ,page: true
		  });
		
		  table.on('tool(demo)', function(obj){
		    var data = obj.data;
		   	if(obj.event === 'del'){
		      layer.confirm('真的删除么', function(index){
		      	obj.del();
		        layer.close(index);
		        $.ajax({
		            type : "POST",
		            dataType:"json",
		            contentType: "application/json;charset=UTF-8",
		            url : "user/delete",
		            async: false,
		            data : JSON.stringify(data),
		            success : function(result) {
		            	
		            },
		            error : function(e){
		                console.log(e.status);
		                console.log(e.responseText);
		            }
		        });
		      });
		    } else if(obj.event === 'edit'){
		    	 table.on('edit(demo)', function(obj){
		 		    var value = obj.value //得到修改后的值
		 		    ,data = obj.data //得到所在行所有键值
		 		    ,field = obj.field; //得到字段
		 		   // layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改为：'+ value);
		 		 });
		    	 layer.confirm('确认修改吗', function(index){
				        layer.close(index);
				        $.ajax({
				            type : "POST",
				            dataType:"json",
				            contentType: "application/json;charset=UTF-8",
				            url : "user/update",
				            async: false,
				            data : JSON.stringify(data),
				            success : function(result) {
				            	
				            },
				            error : function(e){
				                console.log(e.status);
				                console.log(e.responseText);
				            }
				        });
				   });
		    	}
		  });
		});
	</script>
</body>
</html>